<template>
  <!-- 🔴 修正：shadow="hover" → :shadow="true"（iview 仅支持布尔值） -->
  <Card :shadow="true" class="feature-nav-container">
    <div class="feature-list">
      <!-- 体重记录导航项 -->
      <div class="feature-item" @click="$router.push('/health/weight-list')">
        <Icon type="ios-weight" size="24" class="feature-icon"></Icon>
        <div class="feature-name">体重记录</div>
      </div>
      <!-- 其他功能项（不变） -->
      <div class="feature-item" @click="$router.push('/health/bmi-analysis')">
        <Icon type="ios-pie" size="24" class="feature-icon"></Icon>
        <div class="feature-name">BMI 分析</div>
      </div>
      <div class="feature-item" @click="$router.push('/health/exercise-plan')">
        <Icon type="ios-walk" size="24" class="feature-icon"></Icon>
        <div class="feature-name">锻炼计划</div>
      </div>
      <div class="feature-item" @click="$router.push('/health/diet-record')">
        <Icon type="ios-restaurant" size="24" class="feature-icon"></Icon>
        <div class="feature-name">饮食记录</div>
      </div>
    </div>
  </Card>
</template>

<script>
export default {
  name: 'FeatureNav', // 组件名，确保唯一
  data() {
    return {}
  }
}
</script>

<style scoped>
.feature-nav-container {
  margin-bottom: 16px;
}
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 0;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  cursor: pointer;
  padding: 12px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.feature-item:hover {
  background-color: #f5f7fa;
}
.feature-icon {
  color: #2d8cf0;
  margin-bottom: 8px;
}
.feature-name {
  font-size: 14px;
  color: #333;
}
</style>